<template>

  <div>
    <component
        :record="record"
        :style="`width:${record.options.width}`"
        @change="handleChange"
        :disabled="disabled"
        :preview="renderPreview"
        :models="models"
        :is="customComponent">
    </component>
  </div>

</template>
<script>
export default {
  data() {
    return {};
  },
  props: {

    record: {
      type: Object,
      required: true,
    },

    formConfig: {
      type: Object,
      required: false,
    },

    models: {
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },

    renderPreview: {
      type: Boolean,
      default: false,
    },
  },
  inject: {
    customComponents: {
      from: 'customC',
      default: () => [],
    },
  },
  computed: {
    customComponent() {

      let customComponentList = {};
      if (this.customComponents) {

        this.customComponents.forEach(item => {
          customComponentList[item.type] = item.component;
        });
      }
      return customComponentList[this.record.type];
    },
  },
  methods: {
    handleChange(value, key) {
      this.$emit('change', value, key);
    },
  },
};

</script>
